<template>
  <!--------------------------- 顶部导航部分 --------------------------->
  <van-nav-bar
    title="订单确认"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <!--------------------------- 主体内容部分 --------------------------->
  <div class="container">
    <!-- 1. 地址栏布局，:show-add-button="false" 底部 新增地址 按钮不显示 -->
    <van-address-list
      class="current-address"
      :list="currentAddress"
      default-tag-text="默认"
      @click="popupShow"
      :show-add-button="false"
    />
    <!-- 2. 地址列表弹出层 -->
    <van-popup
      class="addressList"
      v-model:show="showBottom"
      position="bottom"
    >
      <van-address-list
        v-model="chosenAddressId"
        :list="addressList"
        default-tag-text="默认"
        @click-item="chosenAddress"
        @add="onAdd"
        @edit="onEdit"
      >
        <!-- 当地址列表为空时，通过插槽的形式，显示空状态 -->
        <template #top v-if="isEmpty">
          <van-empty description="目前还没有地址哦！" />
        </template>
      </van-address-list>
    </van-popup>
    <!-- 3. 需要结算的商品列表 -->
    <div class="product-list">
      <!-- 头部商品数量展示 -->
      <van-cell-group>
        <van-cell :title="totalCount" />
      </van-cell-group>
      <!-- 商品列表展示 -->
      <van-cell-group class="list">
        <van-cell v-for="item in cartInfo" :key="item.id">
          <van-card
            :num="item.cart_num"
            :price="item.truePrice"
            :title="item.productInfo.store_name"
            :thumb="item.productInfo.image"
          />
        </van-cell>
      </van-cell-group>
    </div>
  </div>
  <!--------------------------- 立即付款底部栏 ------------------------->
  <van-submit-bar
    :loading="false"
    :price="totalPrice * 100"
    label="订单总计："
    button-text="立即付款"
    @submit="onSubmit"
  />
  <!--------------------------- 付款方式弹出层 ------------------------->
  <van-action-sheet
    v-model:show="isPayment"
    cancel-text="取消"
    title="请选择支付方式"
    close-on-click-action
    class="paymentPopup"
  >
    <!-- 通过插槽的形式，自定义面板的展示内容 -->
    <template #default>
      <van-radio-group v-model="checkedPayment" checked-color="#ee0a24">
        <van-cell-group inset>
          <!-- 微信支付 -->
          <van-cell title="微信支付" label="微信快捷支付" clickable @click="checkedPayment = 'wechat'" size="large" center>
            <!-- 自定义左侧图标 -->
            <template #icon>
              <van-image
                src="https://static-s.iqiyi.com/qimages/imagepool/bf39e05c97c94a819841c4f25e974a1b_wechat.svg"
              />
            </template>
            <!-- 自定义右侧图标 -->
            <template #right-icon>
              <van-radio name="wechat"/>
            </template>
          </van-cell>
          <!-- 支付宝支付 -->
          <van-cell title="支付宝支付" label="支付宝快捷支付" clickable @click="checkedPayment = 'alipay'" size="large" center>
            <!-- 自定义左侧图标 -->
            <template #icon>
              <van-image
                src="https://static-s.iqiyi.com/qimages/imagepool/b3e31a766310456d995d43bf587dfe38_alipay.svg"
              />
            </template>
            <!-- 自定义右侧图标 -->
            <template #right-icon>
              <van-radio name="alipay"/>
            </template>
          </van-cell>
          <!-- 余额支付 -->
          <van-cell title="余额支付" :label="`剩余金额：${ yue }`" clickable @click="checkedPayment = 'yue'" icon="gold-coin" size="large" center>
            <template #right-icon>
              <van-radio name="yue"/>
            </template>
          </van-cell>
          <!-- 去支付按钮 -->
          <van-cell>
            <van-button type="danger" round block @click="handlePay">去支付</van-button>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </template>
  </van-action-sheet>
</template>
<script setup>
import { ref, computed, toRaw } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { getAddressList, getOrderConfirm, createOrder } from '@/api/order.js'
// 通过 history.state 接收到上级组件传递过来的参数
const cartId = history.state.cartId
// 返回按钮触发的函数
const onClickLeft = () => history.back()

/* --------------------------- 收件地址栏 -------------------------- */
// 1. 第一次进入确认订单页面时，通过计算属性获取地址栏需要展示的数据
const currentAddress = ref([])

/* --------------------------- 弹出层地址列表 -------------------------- */
// 2. 控制弹出层是否显示
const showBottom = ref(false)
// 3. 弹出层中被选中地址的 id
const chosenAddressId = ref('1')
// 4. 存储弹出层地址列表数据
const addressList = ref([])
// 5. 判断弹出层地址列表是否为空
const isEmpty = computed(() => addressList.value.length === 0)
// 6. 点击地址栏，显示弹出层
const popupShow = () => {
  showBottom.value = true
}
// 7. 将响应回来的数据进行转化 van-address-list 需要的形式
const convertData = data => {
  return data.map(item => {
    // 将数据赋值给规定的属性
    const temp = {
      id: item.id,
      name: item.real_name,
      tel: item.phone,
      address: item.province + item.city + item.district + item.detail,
      isDefault: item.is_default
    }
    // 检测是否为默认数据
    if (item.is_default === 1) {
      // 记录勾选的 ID，在地址列表中让当前地址被选中
      chosenAddressId.value = item.id
      // 把默认数据当做第一次加载时需要展示的数据，currentAddress 值是数组
      currentAddress.value = [temp]
    }
    return temp
  })
}

// 8. 发送请求，获取用户收件地址列表数据
const initAddressList = async () => {
  const { data } = await getAddressList({
    limit: 5, // 设置一次加载的数量，实际情况收件地址是会限制最多展示几个的，所以这里设置为 5
    page: 1 // 设置加载的页数，即第几次加载数据
  })
  if (data.status !== 200) { return }
  addressList.value = convertData(data.data)
}
initAddressList()
// 9. 弹出层选中某个地址后触发的函数，item 获取到当前被选中的地址信息
const chosenAddress = (item) => {
  // 将 item 赋值给 currentAddress
  currentAddress.value = [item]
  // toRaw() 将被 proxy 包裹对象转化为普通对象
  console.log(toRaw(item))
  // 关闭弹出层
  showBottom.value = false
}

const router = useRouter()
// 10. 新增地址按钮触发的函数，跳转到新增地址页面，并且传递购物车参数，
// 目的是新增地址完成后，再次跳转回订单确认页面时，仍然可以接收到购物车参数，成功展示需要购买的商品列表数据
const onAdd = () => router.push({
  name: 'add-address',
  state: {
    cartId
  }
})
// 11. 编辑地址触发的函数，跳转到新增编辑地址组件，并且将当前修改的地址 id 传递获取
const onEdit = item => router.push({
  name: 'add-address',
  state: {
    addressId: item.id,
    cartId
  }
})

/* ----------------------- 获取购买商品的和底部结算信息 ----------------------- */
// 1. 声明响应式变量，存储获取到的信息
const orderInfo = ref({})
// 2. 通过计算属性，获取购物车结算的商品列表信息
const cartInfo = computed(() => orderInfo.value?.cartInfo)
// 3. 通过计算属性，获取购物车结算的总价格
const totalPrice = computed(() => orderInfo.value?.priceGroup?.totalPrice || 0)
// 4. 通过计算属性，获取商品列表的总数量
const totalCount = computed(() => `总计 ${cartInfo.value?.length || 0} 件`)
// 5. 声明函数，发送请求，获取数据
const initOrderConfirm = async () => {
  const { data } = await getOrderConfirm({
    cartId, // 要结算的购物车项目 ID，多个 ID 以逗号连接，如 1,2,3
    new: 0 // 表示订单类型，0 表示购物车结算订单，1 表示立即购买订单
  })
  if (data.status !== 200) { return }
  orderInfo.value = data.data
  console.log(orderInfo.value)
}
initOrderConfirm()

/* --------------------------- 付款方式弹出层 -------------------------- */
// 1. 控制弹出框是否显示状态
const isPayment = ref(false)
// 2. 支付方式被选中的值，默认选中余额支付
const checkedPayment = ref('yue')
// 3. 通过计算属性，得到余额支付的金额
const yue = computed(() => orderInfo.value?.userInfo.now_money || 0)
// 4. 点击立即付款，显示付款方式弹出层
const onSubmit = () => {
  isPayment.value = true
}

// 5. 点击去支付按钮触发的函数，orderInfo.value.orderKey 当前确认订单的 id
const handlePay = async () => {
  const { data } = await createOrder(orderInfo.value.orderKey, {
    addressId: currentAddress.value?.[0].id, // 收货地址 ID
    payType: checkedPayment.value // 支付方式
  })
  if (data.status !== 200) { return }
  // 创建订单成功，跳转到订单详情页，展示当前订单的信息
  showToast('订单支付成功，跳转到订单详情页面！')
  router.push({
    name: 'order-detail',
    params: {
      orderId: data.data.result.orderId // 当前订单 id
    }
  })
}
</script>

<style lang="scss" scoped>
/* ---------------------- 设置顶部导航固定定位 ------------------- */
.van-nav-bar {
  position: fixed !important;
  top: 0;
  width: 100%;
  border-bottom: 1px solid #f2f2f2;
}

/* ---------------------- 主体内容区域 -------------------------- */
.container {
  padding: 50px 0;
  /* 1. 地址栏样式 */
  .current-address {
    padding-bottom: 15px;
    position: relative;
    // 设置底部分割线样式
    &:after {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 0.05333rem;
      background: repeating-linear-gradient(-45deg,var(--van-warning-color) 0,var(--van-warning-color) 20%,transparent 0,transparent 25%,var(--van-primary-color) 0,var(--van-primary-color) 45%,transparent 0,transparent 50%);
      background-size: 2.13333rem;
      content: "";
    }
    :deep(.van-address-item) {
      padding: 0;
      .van-cell__title {
        padding-right: 0;
        .van-radio__label {
          margin-left: 8px;
        }
        .van-address-item__tag {
          background-color: #d6251f;
        }
      }
      // 隐藏左侧单选按钮和右侧编辑按钮
      .van-badge__wrapper {
        display: none;
      }
    }
  }
  /* 2. 弹出层地址列表 */
  .addressList {
    // 删除底部按钮的边框色
    :deep(.van-address-list__bottom) {
      background-color: transparent;
    }
  }
  /* 3. 商品列表 */
  .product-list {
    .list {
      .van-cell {
        :deep(.van-cell__value) {
          text-align: left;
          .van-card {
            background-color: #fff;
            padding: 0;
            .van-card__content {
              justify-content: space-around;
              .van-card__title {
                font-size: 14px;
                font-weight: 400;
              }
              .van-card__price {
                color: #f2200c;
                font-weight: 400;
              }
            }
          }
        }
      }
    }
  }
}

/* ---------------------- 立即付款底部栏 ------------------------ */
.van-submit-bar {
  border-top: 1px solid #f2f2f2;
}
/* ---------------------- 付款方式弹出层 ------------------------ */
.paymentPopup {
  .van-action-sheet__content {
    .van-cell {
      .van-image {
        width: 30px;
        height: 30px;
        margin-right: 10px;
      }
      :deep(.van-cell__left-icon) {
        font-size: 30px;
        margin-right: 10px;
        color: #ff9900;
      }
      button {
        &:hover {
          border-color: transparent;
        }
      }
    }
  }
}
</style>
